<template>
	<view class="clientWrapper">
		<view class="clientSearchItem">
			<!-- <input class="search clientSearch" placeholder="请输入供应商名称/编号" v-model="inputStr"></input>
			<button class="button searchBt" @tap="search()">搜索</button> -->
			<view class='clientSearch'>账户名:{{MemberName}}</view>
			<button class="searchBt" @tap="filter()">搜索条件</button>
			<button class="searchBt" @tap="openModel()">新增档案</button>
		</view>
		<view class="container" v-show="isTable">
			<!-- 表格外层 -->
			<view class="tdHeader" :style="{width:allWidth+'px'}">
				<view class="tdTh" v-for="(item,index) in clientTitleList" :key="item.name" :style="{width:clientSettingWidthList[index] + 'px'}">
					{{item.name}}
				</view>
			</view>
			<view class="tdContain" :style="{width:allWidth +'px',height:tdHeight+'px'}">
				<view class="tdItems" v-for="(item,index) in clientList" :key="index" @tap="updata(index)" @longtap="del(index)">
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[0] + 'px'}">{{index+1}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[1] + 'px'}">{{item.BankName}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[2] + 'px'}">{{item.BankNo}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[3] + 'px'}">{{item.OpenMan}}</view>
					<!-- <view class="tdItems tdItem" :style="{width:clientSettingWidthList[4] + 'px'}">{{item.Gender==1?'男':'女'}}</view> -->
				</view>
			</view>
		</view>
		<view :style="{height:tdListHeight+'px'}" class="listContainer" v-show="!isTable">
			<view class="tdListItem" v-for="(item,index) in clientList" :key="index" :style="{ display:(nowRote === index) ? 'table':'block'}">
				<view @tap="updata(index)" class="left-contain" @longtap="del(index)">
					<view class="ClientTitle">{{item.BankName}}</view>
					<view>账户:{{item.BankNo}}</view>
					<view>开户人:{{item.OpenMan}}</view>
					<!-- <view>性别:{{item.Gender==1?'男':'女'}}</view> -->
				</view>
				<view class="sortIndex">{{index+1}}</view>
				<!-- <button class="lookMoreInfo"  @tap.stop="lookMore(index)">{{nowRote == index?'收起':'展开'}}</button> -->
				<!-- <button class="lookMoreInfo" :style="{ transform :(nowRote == index) ? 'rotate(180deg)':'rotate( 0deg)'}"
				 @tap.stop="lookMore(index)"></button> -->
			</view>
		</view>
		<view class="options">
			<view class="cu-modal" :class="modalName=='Modal'?'show':''" >
				<view class="cu-dialog">
					<view class="cu-dialogWrap">
						<view class="cu-bar bg-white justify-end">
							<view class="content">设置表格列宽度</view>
							<view class="action" @tap="hideModals">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view class="padding-xl">
							<view class="padding-xl-item" v-for="(item,index) in clientTitleList" :key="item.name">
								<text>{{item.name}}:</text><input v-model="clientSettingTempList[index]" type="number" />
							</view>
						</view>
						<view class="cu-bar bg-white justify-end">
							<view class="action">
								<button class="cu-btn line-green text-green" @tap="hideChaneg">取消</button>
								<button class="cu-btn bg-green margin-left" @tap="sureSetting">确定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!--新增新增银行账号弹框-->
	<view class="cu-modal" :class="showmodle?'show':'hide'">
		<view class="cu-dialog"  style="min-height:240px !important">
			<view class="cu-bar bg-white justify-end">
				<view class="cuIcon-home content">{{isAdd?"新增银行账号":"修改银行账号"}}</view>
				<view class="action" @tap="hideModal(0)">
					<text class="cuIcon-close text-blue"></text>
				</view>
			</view>
			<view>
				<view class="border1">
					<view class="cu-form-group">
						<view class="title">*银行名称</view>
						<input class="inpt text-left" v-model="BankName"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">*银行账户</view>
						<input class="inpt text-left" v-model="BankNo"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">* 开户人</view>
						<input class="inpt text-left" v-model="OpenMan"></input>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white">
				<view class="action margin-0 flex-sub text-red solid-right" @tap="hideModal(0)">取消</view>
				<view class="action margin-0  flex-sub  text-blue solid-left" @tap="hideModal(1)">清空</view>
				<view class="action margin-0  flex-sub  text-blue solid-left" @tap="hideModal(2)" v-if="isAdd == true">新增</view>
				<view class="action margin-0  flex-sub  text-blue solid-left" @tap="hideModal(3)" v-if="isAdd == false">修改</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	//速云公共接口
	import * as Api1 from '@/syApis/syBb/apis.js'
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		data() {
			return {
				//搜索条件
				inputStr: "",
				//表头列表
				clientTitleList: [{
						name: "序号"
					},
					{
						name: "银行名称"
					}, {
						name: "银行账户"
					}, {
						name: "开户人"
					}, {
						name: "性别"
					}
				],
				//表头宽度列表
				clientSettingWidthList: [50, 120, 120, 120, 50],
				//设置表头宽度临时列表
				clientSettingTempList: [50, 120, 120, 120, 50],
				//表格内容显示部分高度
				tdHeight: 0,
				//数据展示部分高度
				tdListHeight: 0,
				//供应商or客户列表
				clientList: [],
				//判读是否供应商
				isClient: false,
				//是否展开
				isLookMore: -1,
				//是否展示表格
				isTable: false,
				//弹框展示
				modalName: null,
				MemberName: "全部账号",
				nowRote: -1,
				BankName:"",
				BankNo:"",
				OpenMan:"",
				showmodle:false,
				isAdd:false
			}
		},
		methods: {
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
			//跳转到筛选条件页
			filter() {
				this.AddListen();
				uni.navigateTo({
					url: './info-BankMessageFilter'
				})
			},
			AddListen() {
				var _this = this;
				this.$eventHub.$on('fire', function(data) {
					_this.MemberName = data.MemberName == "" ? "全部账户" : data.MemberName;
					_this.getCgOrder(data);
					_this.$eventHub.$off('fire');
				});
			},
			updata(e) {
				this.isAdd = false;
				this.showmodle = true
				// console.log(this.orderList[e])
				let data = {
					BankID: e
				}
				this.BankName = this.clientList[e].BankName;
				this.BankNo = this.clientList[e].BankNo;
				this.OpenMan = this.clientList[e].OpenMan;
				this.BankID = this.clientList[e].BankID;
			},
			openModel() {
				this.showmodle = true;
				this.isAdd = true;
				this.OpenMan = "";
				this.BankName = "";
				this.BankNo = "";
			},
			hideModal(e) {
				if (e == 0) {
					this.showmodle = false
				} else if (e == 1) {
					this.OpenMan = "";
					this.BankName = "";
					this.BankNo = "";
				} else if (e == 2) {
					if (this.BankName == "") {
						Api.showTip("银行名称不能为空")
					} else if (this.BankNo == "") {
						Api.showTip("银行账户不能为空")
					} else if (this.OpenMan == "") {
						Api.showTip("开户人不能为空")
					} else {
						this.isAdd = true;
						var that = this;
						let CreateID = uni.getStorageSync("UserCode");
						let Save_M_Data_Json = {
							BankName: that.BankName,
							BankNo: that.BankNo,
							OpenMan: that.OpenMan,
							CreateID: that.CreateID,
						}
						
						let data = {
							Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
						};
						console.log(Save_M_Data_Json)
						Api.AddBankMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Api.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Api.showTip(res.data.ErrorMsg);
								} else {
									Api.showTip("新增成功");
									//点新增之后就出现银行账号
									that.getCgOrder();
									that.BankName = "";
									that.BankNo = "";
									that.OpenMan = "";
									that.showmodle = false;
								}
							} else {
								Api.showTip("服务器开小差了");
							}
						});
					}
				} else if (e == 3) {
					if (this.BankName == "") {
						Api.showTip("银行名称不能为空")
					} else if (this.BankNo == "") {
						Api.showTip("银行账户不能为空")
					} else if (this.OpenMan == "") {
						Api.showTip("开户人不能为空")
					} else {
						this.isAdd = true;
						var that = this;
						let CreateID = uni.getStorageSync("UserCode");
						let Save_M_Data_Json = {
							BankName: that.BankName,
							BankNo: that.BankNo,
							OpenMan: that.OpenMan,
							BankID: that.BankID,
							CreateID: that.CreateID,
						}

						// Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
						let data = {
							Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
						};
						console.log(Save_M_Data_Json)
						Api.Update_BankMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Api.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Api.showTip(res.data.ErrorMsg);
								} else {
									Api.showTip("修改成功");
									//点新增之后就出现银行账号
									that.getCgOrder();
									that.showmodle = false; 
								}
							} else {
								Api.showTip("服务器开小差了");
							}
						});
					}
				}

			},
			//长按删除
			delop(e) {
				console.log(e)
				var that = this;
				Api.showConfirm("是否删除此<员工档案>", function(state) {
					if (state) {
						let data = {
							OperatorID: e
						}
						Api.DeleteOperatorMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									// api.showTip()
								} else if (res.data.ErrorMsg != "") {
									Api.showTip(res.data.ErrorMsg)
								} else {
									Api.showTip("删除成功");
									//删除之后
									let tempList = [];
									that.clientList.forEach((item, index) => {
										if (item.OperatorID != e) {
											tempList.push(item);
										}
									})
									that.clientList = tempList;
								}
							} else {
								Api.showTip("服务器开小差了");
							}
						})
					} else {
						console.log("点击了取消")
					}
				})
			},
			//过滤监听
			// AddListen() {
			// 	var _this = this;
			// 	this.$eventHub.$on('fire', function(data) {
			// 		// _this.MemberCode = data.MemberCode,
			// 		_this.MemberName = data.MemberName == "" ? "全部会员" : data.MemberName,
			// 			// _this.Photo = data.Photo,
			// 			_this.getCgOrder(data);
			// 		_this.$eventHub.$off('fire');
			// 	});
			// },
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeShow();
				} else if (index == 1) {
					this.showModal();
				}
			},
			// openModel() {
			// 	this.AddListens();
			// 	uni.navigateTo({
			// 		url: "./addinfo-staff?type=1"
			// 	})
			// },
			//新增修改监听
			AddListens() {
				var _this = this;
				this.$eventHub.$on('fires', function(data) {
					_this.getCgOrder();
					console.log("调用了");
					_this.$eventHub.$off('fires');
				});
			},
			del(index) {
				var that = this
				Api.showConfirm("是否删除此<机构档案>", function(state) {
					if (state) {
						let data = {
							MemberID: that.clientList[index].MemberID
						}
						var _this = that;
						Api.Delete_MemberMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Api.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Api.showTip(res.data.ErrorMsg);
								} else {
									Api.showTip("删除成功");
									_this.getCgOrder();
								}
							} else {

							}
						});
					} else {
						console.log("点击了取消")
					}
				})
			},
			// openModel(type, index = 0) {
			// 	this.AddListens();
			// 	if (type == 1) {
			// 		uni.navigateTo({
			// 			url: './info-vipMessageAdd?type=0&NowSelectUnit=' + JSON.stringify(this.clientList[index])
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url: './info-vipMessageAdd?type=1'
			// 		})
			// 	}
			// },
			//获取汇总数据
			getCgOrder: function(filter) {
				let data = {};
				if (filter == undefined) {
					data = {
						SelectAll: 1
					}
				} else {
					data = filter;
				}
				var _this = this;
				Api.Get_BankMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							if (res.data.ResultMsg.length == 0) {
								Api.showTip("查无数据");
							}
							_this.clientList = res.data.ResultMsg;
							_this.inputStr = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				});
			},
			//显示弹框
			showModal() {
				this.modalName = "Modal"
			},
			//隐藏弹框
			hideModals() {
				this.modalName = "";
				let tempList = [];
				this.clientSettingWidthList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingTempList = tempList;
				// uni.setStorageSync("tbWidList",JSON.stringify(tempList));
				// this.tdWidthList = this.tdWidth;
			},
			hideChaneg() {
				this.modalName = "";
				let tempList = [];
				this.clientSettingWidthList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingTempList = tempList;
				// uni.setStorageSync("tbWidList",JSON.stringify(tempList));
				// this.tdWidthList = this.tdWidth;
			},
			sureSetting() {
				let tempList = [];
				this.clientSettingTempList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingWidthList = tempList;
				uni.setStorageSync("InfoBankWidthList",JSON.stringify(tempList));
				this.modalName = "";
			},
			//获取供应商or客户or往来单位
			Get_ClientMessage(Filter = '') {
				let data = {};
				if (filter == undefined) {
					data = {
						SelectAll: 1
					}
				} else {
					data = filter;
				}
				var _this = this;
				Api.Get_MemberMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							if (res.data.ResultMsg.length == 0) {
								utilsApi.showTip("查无数据");

							}
							that.clientList = res.data.ResultMsg;
							that.inputStr = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				});
			},
			lookDetail: function(index) {
				this.AddListens();
				uni.navigateTo({
					url: "./addinfo-staff?type=0&nowStraffInfo=" + JSON.stringify(this.clientList[index])
				})
			},
			//选择供应商or客户
			selectClient(index) {
				//拿到选择的供应商条目
				let ClientItem = JSON.stringify(this.clientList[index]);
				//返回监听
				this.$eventHub.$emit('clientListen', ClientItem);
				uni.navigateBack({
					delta: 1
				})
			},
			//修改展示方式
			changeShow() {
				this.isTable = !this.isTable;
			},
			//搜索
			search() {
				if (this.inputStr != "") {
					let Filter = "";
					if (this.isClient != 2) {
						Filter = " and ClientName like '%" + this.inputStr + "%' or ClientCode like '%" + this.inputStr + "%'";
					} else {
						Filter = "ClientName like '%" + this.inputStr + "%' or ClientCode like '%" + this.inputStr + "%'";
					}

					this.Get_ClientMessage(Filter);
				} else {
					this.Get_ClientMessage();
				}
			}
		},
		created() {
			

		},
		onShow() {
			this.$eventHub.$off('fire');
			let screenHeight = uni.getSystemInfoSync().windowHeight;
			//数据展示部分的高度
			this.tdListHeight = screenHeight - 50;
			//表格除表头部分数据的展示
			this.tdHeight = screenHeight - 90;
			// this.Get_ClientMessage();
		},
		onLoad(options) {
			this.getCgOrder();// 获取表格框的宽度
			let tbWidList = uni.getStorageSync("InfoBankWidthList", "");
			// console.log(tbWidList);
			if (tbWidList != "") {
				this.clientSettingWidthList = JSON.parse(tbWidList);
				this.clientSettingTempList = JSON.parse(tbWidList);
			}
		},
		computed: {
			//表头总宽度
			allWidth() {
				let allClietnWidth = 0;
				this.clientSettingWidthList.forEach(item => {
					allClietnWidth += parseFloat(item);
				})
				return allClietnWidth;
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
		font-family: "宋体";
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.clientWrapper {
		width: 100%;
		height: 100%;
		background: #FFF;
	}

	.clientSearchItem {
		width: 100%;
		height: 50px;
		display: flex;
		box-sizing: border-box;
		padding: 7.5px 5px 0px 5px;
	}

	.clientSearchItem .clientSearch {
		flex: 1;
		height: 35px;
		line-height: 35px;
		padding-left: 8px;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.clientSearchItem .searchBt {
		width: 70px;
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		padding: 0px;
		margin-right: 2px;
		/* border-bottom-left-radius: 0px; */
		background-color: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.options {
		width: 100%;
		height: 0px;
		display: flex;
		border-top: 1px solid #ccc;
	}

	.options button {
		padding-left: 12px;
		padding-right: 12px;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		margin-top: 5px;
		background: rgba(124, 170, 216, 1);

		color: #FFF;
		box-sizing: border-box;

	}

	.container {
		width: 100%;
		overflow: auto;
	}

	.container .tdHeader {
		height: 40px;
		line-height: 40px;
		background: rgba(124, 170, 216, 1);
		box-sizing: border-box;
		display: flex;
	}

	.container .tdHeader .tdTh {
		box-sizing: border-box;
		min-height: 40px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 4px;
		padding-right: 4px;
		overflow: auto;
		color: #FFF;
		text-align: center;
	}

	.tdContain {
		overflow: auto;
	}

	.tdContain .tdItems {
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tdContain .tdItems.tdItem {
		display: block;
		box-sizing: border-box;
		height: 40px;
		line-height: 40px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 4px;
		padding-right: 4px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.listContainer {
		width: 100%;
		overflow-x: hidden;
	}

	.listContainer .tdListItem {
		width: 95%;
		margin: auto;
		margin-bottom: 5px;
		border-radius: 5px;
		border: 1px solid #ebebeb;
		padding-left: 45px;
		padding-right: 8px;
		box-sizing: border-box;
		position: relative;
		height: 75px;
		overflow: hidden;
	}

	.listContainer .tdListItem.more {
		display: table;
	}

	.listContainer .tdListItem view {
		padding-top: 2px;
		padding-bottom: 2px;
		line-height: 20px;
	}

	.listContainer .tdListItem .left-contain {
		width: 100%;
		overflow: hidden;
	}

	.listContainer .tdListItem .clientItemShow {
		display: flex;
	}

	.listContainer .tdListItem .ClientTitle {
		font-size: 16px;
		font-weight: bold;
	}

	.listContainer .tdListItem .clientItemShow text {
		flex: 1;
	}

	.listContainer .tdListItem .sortIndex {
		padding: 0px 5px;
		position: absolute;
		left: 5px;
		top: 5px;
		border-radius: 2px;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.listContainer .tdListItem .lookMore {
		width: 20px;
		height: 20px;
		background: url(../../static/pullMore.png) no-repeat;
		position: absolute;
		right: 5px;
		bottom: 5px;
		border-radius: 2px;
		color: #FFF;
		padding: 0px 5px;
	}

	.cu-dialog {
		min-height: 400px !important;
		max-height: 400px !important;
		/* display: flex;
		flex-direction: column; */
	}

	.cu-dialog .cu-dialogWrap {
		min-height: 400px !important;
		max-height: 400px !important;
		display: flex;
		flex-direction: column;
	}

	.padding-xl {
		overflow: auto;
		flex: 1;
	}

	.padding-xl-item {
		display: flex;
	}

	.padding-xl-item text {
		min-width: 80px;
		height: 40px;
		line-height: 40px;
		text-align: right;
		padding-right: 10px;
		box-sizing: border-box;
		display: table;
	}

	.padding-xl-item input {
		flex: 1;
		border: 1px solid #CCC;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
	}

	.lookMoreInfo {
		width: 80upx;
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		background: rgba(124, 170, 216,1);
		// background: url(../../static/pull.png) no-repeat;
		position: absolute;
		bottom: 10upx;
		right: 10upx;
		padding: 0upx;
		background-size: 100% 100%;
		transition: height 2s;
		color: #FFF;
	}
	
</style>
